<!-- 现场领取证书 --> 
<template>
  <el-dialog
    :title="dialogTitle"
    :visible="visible"
    width="800px"
    @close="handleClose"
  >
    <div class="dialog-content">
      <p class="confirm-text">是否确认以下人员证书已现场领取？</p>

      <el-table :data="certificateList" style="width: 100%" border>
        <el-table-column prop="certificateNo" label="证书编号" />
        <el-table-column prop="studentName" label="姓名" />
        <el-table-column prop="idNumber" label="证件编号" />
        <el-table-column prop="phonenumber" label="电话" />
      </el-table>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="confirmPickup">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "OnSitePickupDialog",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    certificateList: {
      type: Array,
      required: true,
    },
  },
  computed: {
    dialogTitle() {
      return `现场领取证书`;
    },
  },
  methods: {
    handleClose() {
      this.$emit("update:visible", false);
    },
    confirmPickup() {
      // 调用父组件传递的回调函数
      this.$emit("confirm");
    },
  },
};
</script>

<style scoped>
.dialog-content {
  margin: 20px 0;
}

.confirm-text {
  font-size: 14px;
  color: #666;
  margin-bottom: 15px;
}
</style>

